import React from "react";
import { Empty, Table } from "antd";

import { useTable } from "../hooks/useTable";
import { useColumns } from "../hooks/useColumns";

const DataTable = () => {
  const { columns } = useColumns();
  const { items, loading, error, handleChange } = useTable();

  return (
    <>
      {error ? (
        <Empty />
      ) : (
        <Table
          dataSource={items}
          columns={columns}
          loading={loading}
          rowKey={record => record.id}
          onChange={handleChange}
        />
      )}
    </>
  );
};

export default DataTable;
